'
<template>
  <div>
    <van-nav-bar
      class="box"
      title="热销商品"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="box">
      <van-image width="10rem" fit="contain" :src="list.img_url" />
      <span class="ppx">{{ list.name }}</span>
    </div>
    <!-- 下拉菜单 -->
    <van-dropdown-menu change="change">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item
        @change="change1"
        v-model="value2"
        :options="option2"
      />

      <van-dropdown-item @change="change" v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <!-- 列表 -->
    <van-grid class="ppx1" :border="false">
      <van-grid-item
        v-for="item in goodsList"
        :key="item.id"
        @click="$router.push('/goodsDetail/' + item.id)"
      >
        <van-image
          round
          width=" 150px"
          height="150px"
          :src="item.list_pic_url"
        />

        <span class="span1">{{ item.name }}</span>
        <span class="span2">￥{{ item.retail_price }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getListUser, getAllList } from "@/api/zhouyu/home.js";
export default {
  name: "Newgoods",
  data() {
    return {
      list: {},
      goodsList: {},
      value1: 0,
      value2: "a",
      value3: 0,
      option1: [{ text: "综合", value: 0 }],
      option2: [
        { text: "默认", value: "a" },
        { text: "价格升序", value: "asc" },
        { text: "价格降序", value: "desc" },
      ],
      option3: [
        {
          text: "",
          value: "",
        },
      ],
    };
  },
  created() {
    this.initData();
    this.initList();
  },
  methods: {
    //选择切换数据
    async change(value) {
      this.id = value;
      const { data } = await getAllList({
        isHot: 1,
        categoryId: this.id,
        sort: "id",
        order: "desc",
      });
      console.log(data);
      this.goodsList = data.data.data;
      console.log(this.goodsList);
      console.log(value);
    },
    //价格切换
    async change1(value) {
      if (value === "a") {
        const { data } = await getAllList({
          isHot: 1,
          sort: "",
          order: value,
        });
        this.goodsList = data.data.data;
      } else {
        const { data } = await getAllList({
          isHot: 1,
          sort: "price",
          order: value,
        });

        this.goodsList = data.data.data;
      }
    },
    async initList() {
      const { data } = await getAllList({
        isHot: 1,
        sort: this.list.id,
        order: "desc",
      });
      console.log(data);
      this.goodsList = data.data.goodsList;
      console.log(this.goodsList);
      this.option3 = data.data.filterCategory;
      console.log(this.option3);

      this.filterCategory = data.data.filterCategory;
      console.log(this.filterCategory);
      this.filterCategory.forEach((item) => {
        this.option3.push({ text: item.name, value: item.id });
      });
      console.log(this.option3);
      this.option3 = this.option3.splice(5);
      console.log(this.option3);
    },
    async initData() {
      const { data } = await getListUser();
      this.list = data.data.bannerInfo;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: red;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left:before {
  color: #fff;
}
.box {
  position: relative;
  text-align: center;
}
.ppx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
}
.ppx1 {
  text-align: center;
  margin: 0 40px;
}
.span1 {
  margin-top: 10px;
  font-size: 16px;

  word-break: keep-all;
}
</style>
'
